<template>
  <div class="statistics">
    <div class="mains_contain">
      <el-form :inline="true" :model="searchForm" size="small" label-width="80px">
        <el-form-item label="设备名称">
          <el-input v-model="searchForm.name" clearable placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="设备标识">
          <el-input v-model="searchForm.sn" clearable placeholder="请输入设备标识" />
        </el-form-item>
        <el-form-item label="升级时间">
          <el-date-picker v-model="searchTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" icon="el-icon-search" size="mini">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-download" v-has="['upgrade:export']" size="mini" @click="importExcelClick">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="multipleTable" v-el-table-infinite-scroll="load" :data="tableData" :height="maxHeight" style="width: 100%" @selection-change="handleSelectionChange" fit border stripe size="mini"
        highlight-current-row :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
        <!-- <el-table-column type="selection" label="全选" width="40" /> -->
        <el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip align="center"/>
        <el-table-column prop="sn" label="设备标识" show-overflow-tooltip align="center"/>
        <el-table-column prop="model" label="型号" align="center"/>
        <el-table-column prop="version" label="设备版本" align="center"/>
        <el-table-column prop="shellExcuteStatus" label="设备状态" align="center">
          <template slot-scope="scope">
            <!-- <el-tag effect="dark" size="mini" type="warning" v-if="scope.row.shellExcuteStatus == '0'">执行中</el-tag>
          <el-tag effect="dark" size="mini" type="success" v-if="scope.row.shellExcuteStatus == '1'">成功</el-tag>
          <el-tag effect="dark" size="mini" type="danger" v-if="scope.row.shellExcuteStatus == '2'">失败</el-tag> -->
            <span style="color:#E6A23C" v-if="scope.row.shellExcuteStatus == '0'">执行中</span>
            <span style="color:#67C23A" v-if="scope.row.shellExcuteStatus == '1'">成功</span>
            <span style="color:#F56C6C" v-if="scope.row.shellExcuteStatus == '2'">失败</span>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="升级时间" min-width="110" align="center">
        </el-table-column>
      </el-table>
      <div style="text-align: right; margin-right: 20px; margin-top: 20px">
        <el-pagination layout="total" :total="pagination.total > 1 ? pagination.total : 0">
        </el-pagination>
        <!-- <pagination v-show="pagination.total>0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" /> -->
      </div>
    </div>
  </div>
</template>

<script>
import { debounce } from "@/utils/index";

import * as api from "@/api/link/task";
import axios from "axios";
import { getToken } from "@/utils/auth";

import { Message } from "element-ui";
import elTableInfiniteScroll from "el-table-infinite-scroll";
export default {
  directives: {
    "el-table-infinite-scroll": elTableInfiniteScroll,
  },
  comments: {},
  props: {},
  data() {
    return {
      curRemark: "重启",
      searchForm: {
        sn: null,
        name: null,
      },
      searchTime: [],
      groupList: [],
      multipleSelection: [],
      tableData: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 60,
      },
      form: {},
      dialogVisible: false,
      rules: {
        topic: [{ required: true, message: "必须输入topic", trigger: "blur" }],
        body: [{ required: true, message: "必须输入报文", trigger: "blur" }],
      },
      autoInterval: null,
      autoTimeOut: null,
      scrollNum: 1,
      isFlag: 0,
    };
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 280;
    },
  },
  watch: {
    // scrollNum(newVal, oldVal) {
    // }
  },
  created() {
    // this.groupPage();
    // this.getPageList();
  },
  mounted() { },
  methods: {
    load: debounce(function () {
      this.pagination.page = this.scrollNum;
      const p = Object.assign(this.searchForm, this.pagination);
      if (this.searchTime && this.searchTime.length > 0) {
        p.startTime = this.searchTime[0];
        p.endTime = this.searchTime[1];
      } else {
        p.startTime = "";
        p.endTime = "";
      }
      if (this.isFlag) {
        this.$message({
          message: "暂无数据",
          type: "warning",
        });
        return;
      }
      console.log(this.scrollNum, 'this.scrollNum');
      api.updateStatistics(p).then((resp) => {
        if (resp.data.records && resp.data.records.length) {
          var list = resp.data.records;
          if (this.scrollNum == 1) {
            this.tableData = list
          } else {
            this.tableData = this.tableData.concat(list);
          }
          this.pagination.size = resp.data.size;
          this.pagination.total = resp.data.total;
          this.pagination.page = resp.data.current;
          this.scrollNum += 1;
        } else {
          this.isFlag = 1;
          this.scrollNum = this.pagination.page - 1
        }
      });
    }, 1000),
    // 复选框事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getPageList() {
      this.search();
    },
    search() {

      this.tableData = [];
      console.log(10000);
      this.pagination = {
        total: 1,
        page: 1,
        pageSize: 60,
      };
      this.scrollNum = 1;
      const p = Object.assign(this.searchForm, this.pagination);
      if (this.searchTime && this.searchTime.length > 0) {
        p.startTime = this.searchTime[0];
        p.endTime = this.searchTime[1];
      } else {
        p.startTime = "";
        p.endTime = "";
      }
      this.isFlag = 0;
      api.updateStatistics(p).then((resp) => {
        if (resp.data.records && resp.data.records.length) {
          console.log(this.scrollNum, 'this.scrollNum');
          var list = resp.data.records;
          if (this.scrollNum == 1) {
            this.tableData = list
          } else {
            this.tableData = this.tableData.concat(list);
          }
          this.pagination.size = resp.data.size;
          this.pagination.total = resp.data.total;
          this.pagination.page = resp.data.current;
          // this.scrollNum += 1;
        } else {
          this.isFlag = 1;
          this.scrollNum = this.pagination.page - 1
          this.$message({
            message: "暂无数据",
            type: "warning",
          });
        }
      });
    },
    // 导出
    importExcelClick() {
      var url = `api/v1/down-record/updateExport`;
      var p = {
        sn: this.searchForm.sn,
        name: this.searchForm.name,
      };
      if (this.searchTime.length > 0) {
        p.startTime = this.searchTime[0];
        p.endTime = this.searchTime[1];
      }
      axios({
        baseURL: "./",
        url: `${url}`,
        method: "get",
        params: p,
        responseType: "blob", // 服务器返回的数据类型
        headers: {
          Authorization: getToken(),
        },
      }).then((res) => {

        const content = res.data;
        const blob = new Blob([content]);
        const fileName = "升级统计" + ".xls";
        if ("download" in document.createElement("a")) {
          // 支持a标签download的浏览器
          const link = document.createElement("a"); // 创建a标签
          link.download = fileName; // a标签添加属性
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          document.body.appendChild(link);
          link.click(); // 执行下载
          URL.revokeObjectURL(link.href); // 释放url
          document.body.removeChild(link); // 释放标签
        } else {
          // 其他浏览器
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
  },
  destroyed() {
    if (this.autoInterval) {
      clearInterval(this.autoInterval);
    }
    if (this.autoTimeOut) {
      clearTimeout(this.autoTimeOut);
    }
  },
};
</script>

<style scoped lang="scss">
.statistics {
  padding: 20px;

  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}

.showPo {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 9;
}
.showPo > div {
  width: 300px;
  background: white;
  padding-bottom: 20px;
  border-radius: 20px;
}
.showPo div {
  font-size: 12px;
}

.bg1 {
  display: flex;
  align-content: center;
  align-items: center;
  justify-items: center;
  justify-content: center;
  position: relative;
}
.aaa-bgg {
  margin-top: 20px;
  background-image: url("../../assets/images/13.gif");
  width: 250px;
  height: 115px;
  background-size: 100% 100%;
}
.poBtnC {
  margin-top: 30px;
  display: flex;
  align-content: center;
  align-items: center;
  justify-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.poBtn {
  width: 120px;
  border-radius: 20px;
  background: #3267d5;
  color: white;
  height: 35px;
  line-height: 35px;
  cursor: pointer;
}
.showPo_tip {
  .showPo_tip_one {
    font-size: 22px;
    color: #323232;
  }
  .showPo_tip_two {
    margin-top: 25px;
    font-size: 18px;
    color: #3267d5;
  }
}
</style>
